<template>
  <div class="post">
    <!-- 导航部分 开始 -->
    <div class="navgo">
      <span class="lvyou" @click="$router.replace('/')">首页</span> >
      <span class="lvyou" @click="$router.replace('/post')">旅游攻略</span> >
      <span class="span_col_3">攻略详情</span>
    </div>
    <!-- 导航部分 结束 -->

    <!-- 文章详情部分 开始 -->
    <div class="post_details" v-for="item in detailData" :key="item.id">
      <!-- 文章标题 -->
      <h1>{{item.title}}</h1>
      <!-- 文章攻略 -->
      <div class="strategy">
        <div class="strategy_date">
          攻略:
          <span>{{item.created_at | formatTime}}</span>
        </div>
        <div class="strategy_read">
          阅读:
          <span v-if="item.watch">{{item.watch}}</span>
          <span v-if="!item.watch">1</span>
        </div>
      </div>
      <!-- 文章内容 -->
      <div class="post_content" v-html="item.content"></div>
      <!-- 文章评论与分享 -->
      <div class="post_comment">
        <div class="pinglun">
          <span class="iconfont el-icon-s-comment"></span>
          <span>评论({{total}})</span>
        </div>
        <div class="fengxiang" @click="showMessage">
          <span class="iconfont el-icon-share"></span>
          <span>分享</span>
        </div>
      </div>
    </div>
    <!-- 文章详情部分 结束 -->
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: ["detailData", "total"],
  filters: {
    // 时间戳过滤器
    formatTime(val) {
      let res = moment(val).format("YYYY-MM-DD hh:mm:ss");
      return res;
    }
  },
  data() {
    return {
      num: 0
    };
  },
  mounted() {
    console.log("-----------detailData-------------");
    console.log(this.detailData);
  },
  methods: {
    showMessage() {
      this.$message({
        message: "暂不支持分享文章~",
        type: "warning"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.post {
  // 文章导航
  .navgo {
    font-size: 14px;
    color: #606266;
    .lvyou {
      cursor: pointer;
      color: #000;
      font-weight: 500;
      &:hover {
        color: #409eff;
      }
    }
    .span_col_3 {
      color: #ff9d00;
    }
  }
  // 文章详情
  .post_details {
    // 文章标题
    h1 {
      margin-top: 15px;
      border-bottom: 1px solid #dddddd;
      padding-bottom: 20px;
    }
    // 文章攻略
    .strategy {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
      font-size: 16px;
      color: #999;
      .strategy_date {
        margin-right: 20px;
      }
    }
    // 文章详情内容
    /deep/ .post_content {
      color: #444;
      line-height: 30px;
      font-weight: 500;
      margin-bottom: 30px;
      img {
        max-width: 100%;
        // height: 500px;
        object-fit: cover;
        margin: 10px 0;
      }
      h2,
      h3 {
        line-height: 60px;
        color: #333333;
      }
    }
    // 文章的评论与分享
    .post_comment {
      height: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 50px 0 30px 0;
      font-size: 14px;
      color: #999;
      .pinglun {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 20px;
        .iconpinglun {
          font-size: 28px;
          color: #ffa500;
          margin-bottom: 5px;
        }
      }
      .fengxiang {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 20px;
        .iconfenxiang {
          font-size: 28px;
          color: #ffa500;
          margin-bottom: 5px;
        }
      }
      .iconfont {
        font-size: 28px;
        color: #ffa542;
        // .el-icon-s-comment{

        // }
        // .el-icon-share{

        // }
      }
    }
  }
}
</style>